const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
const swiperList = [
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
  'http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  'http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280'
];

const picsList = [
  'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
  'http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  'http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  'https://img2.baidu.com/it/u=3953235281,1144378963&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083',
  'https://img1.baidu.com/it/u=3882080434,329701060&fm=253&fmt=auto&app=120&f=JPEG?w=1038&h=500',
  'https://img2.baidu.com/it/u=340437174,3795365701&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
  'https://i0.hdslb.com/bfs/archive/36d8780a799ee4b999406d48d4fa8d0dfa6644b1.jpg',
  'https://i2.hdslb.com/bfs/archive/928085fd455ec79b54877b18db9f461c9b7391bb.jpg',
  'https://img2.baidu.com/it/u=4253680727,13943846&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  'https://b0.bdstatic.com/ugc/rlzzmjduOoMzptiyfT1CWw35623902a030b24efdfff5b06b7cfe63.jpg',
  'https://i0.hdslb.com/bfs/archive/8525d3889230324c164178061e2a450a0b5d0edc.jpg',
  'https://i1.hdslb.com/bfs/archive/50e6555274b204f56e0f5554f3b2af95f6319e5a.jpg',
  'https://i1.hdslb.com/bfs/archive/49627984cb8c811c2424f9dd3a0965e19670a5c2.jpg',
  'https://i2.hdslb.com/bfs/archive/7cbd499a69c34c52eb750794fca3ac4fa0d1ab3b.jpg',
  'https://imgs.aixifan.com/content/2020_7_2/1.5936966333802655E9.jpeg',
  'https://img1.baidu.com/it/u=2299085593,3233599876&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1355',
]

Page({
  data: {
    windowHeight: 0,
    current: 0,
    autoplay: false,
    isLoading: false,
    enable: false,
    scrollTop: 0,
    duration: 500,
    interval: 5000,
    swiperList,
    gridList: [],
    columns: [
      [],
      []
    ],
  },
  onLoad() {
    this.handleGrid()
    this.loadImages();

  },
  onShow() {
    if (typeof this.getTabBar === 'function') {
      this.getTabBar().setData({
        activeTab: 'index'
      });
    }
  },

  handleGrid() {
    const icons = ['caomei', 'huolongguo', 'juzi', 'lanmei', 'mangguo', 'maotao', 'lizi', 'putao', 'niuyouguo', 'pingguo',]
    const gridList = []
    for (let val of icons) {
      const str = `/statics/fruits/${val}.png`
      gridList.push({
        icon: str,
        label: val
      })
    }
    this.setData({
      gridList: gridList,
      windowHeight: wx.getStorageSync('windowHeight')
    })
  },

  loadImages() {
    const {
      columns
    } = this.data;
    picsList.forEach((item, index) => {
      // 找到高度较小的列
      const columnIndex = columns[0].reduce((a, b) => a + b.height, 0) <=
        columns[1].reduce((a, b) => a + b.height, 0) ? 0 : 1;
      columns[columnIndex].push({
        id: index,
        url: item,
        height: 300 // 默认高度，图片加载后会更新
      });
    });
    this.setData({
      columns
    });
  },

  onImageLoad(e) {
    const {
      width,
      height
    } = e.detail;
    const {
      index,
      col
    } = e.currentTarget.dataset;
    const newHeight = width * 200 / height;
    this.setData({
      [`columns[${col}][${index}].height`]: newHeight
    });
  },

  onRefresh() {
    this.setData({
      enable: true
    });
    setTimeout(() => {
      this.setData({
        enable: false
      });
    }, 1500);
  },

  onScroll(e) {
    const {
      scrollTop
    } = e.detail;
    this.setData({
      scrollTop
    });
  },

  onScrolltolower(e) {
    if (!this.data.isLoading) {
      this.setData({
        isLoading: true
      });
      setTimeout(() => {
        this.setData({
          isLoading: false
        });
      }, 1500);
    }
  },

  handlePreview(e) {
    const { url } = e.currentTarget.dataset
    wx.previewImage({
      current: url,
      urls: [url]
    })
  },
  onChangeValue(e) {
    const { value } = e.detail;
    console.log(value);
  }
})